<template>
     <el-card shadow="never">
        <Table ref="table" :column="columns" :data="tableData">
            <template v-slot:isMember="scope"> {{ scope.row.isMember == 1 ? '是' : '否' }}</template>
            <template v-slot:fun="scope">
        <el-button @click="setPassword(scope.row)" plain type="primary" size="default">修改密码</el-button>
        <el-popconfirm title="确认删除？" :width="300" @confirm="deleteUser(scope.row)">
            <template #reference>
              <el-button plain type="danger" size="default">删除</el-button>
            </template>
          </el-popconfirm>
        <!-- <el-button @click="deleteUser(scope.row)" plain type="danger" size="default">删除</el-button> -->
      </template>
        </Table>
  <Pagination :total="total" v-model:page="tableQuery.indexPage" v-model:size="tableQuery.pageSize" @pagination="getData"> </Pagination>
    </el-card>
</template>
<script setup lang='ts'>
import userApi from '@/api/user'

const columns = computed(()=>{
    return [
    { label: '用户ID', key: 'id'},
    { label: '账号', key: 'userAccount'},
    { label: '手机号', key: 'phone'},
    { label: '密码', key: 'password'},
    { label: '是否非会员', key: 'isMember',type: 'slot' },
    { label: '操作', key: 'fun', type: 'slot' }
  ]
})
const tableData = ref([])
const total = ref(0)

let tableQuery = reactive({
    indexPage: 1,
    pageSize: 15,
})

function getData(){
    userApi.getUserList(tableQuery).then((res:any)=>{
        console.log(res.records)
        tableData.value = res.records
        total.value = res.total
    })
}
getData()

function setPassword(row:any){
    console.log(row)
}

function deleteUser(row:any){
    console.log(row.id)
    userApi.deleteUser(row.id).then((res)=>{
        ElMessage.success('删除成功')
        getData()
    })
}
</script>
<style lang="scss" scoped>
.password-wrap{
    max-width: 400px;
}
.payTime{
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
}
.pay-money{
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
}
</style>